$(function () {
  // 初始化页面数据
  init();
  // 查询英雄数据
  $("#btn_search").on("click", () => {
    console.log('ok');
    $("#tbody").html();
    let hname = $("#hname").val().trim();
    $.ajax({
      url: 'http://127.0.0.1:3000/hero/getHeroList',
      type: 'GET',
      data: {
        heroName: hname
      },
      dataType: 'json',
      success: (res) => {
        // console.log(res);
        if (res.code != 200) {
          console.log(res);
        }
        let htmlStr = template("heroList", {
          list: res.heros
        });
        $("#tbody").html(htmlStr);
      }
    })
  })
  // 添加英雄
  $("#addHeroBtn").on("click", () => {
    // console.log('ok');
    let heroName = $("#heroName").val().trim();
    let gender = $("input[name=gender]:checked").val();
    // console.log(heroName, gender);
    $.ajax({
      url: 'http://127.0.0.1:3000/hero/addHero',
      type: 'POST',
      data: {
        name: heroName,
        gender: gender
      },
      dataType: 'json',
      success: (res) => {
        // console.log(res);
        if (res.code != 200) {
          console.log(res);
        }
        $("#exampleModal").modal("hide");
        init();
      }
    })
  })
  // 删除单个英雄
  $("#tbody").on("click", ".btn-danger", function () {
    // console.log(this);
    let id = $(this).attr("data-id");
    $.ajax({
      url: 'http://127.0.0.1:3000/hero/delHeroById',
      type: 'GET',
      data: {
        id: id
      },
      dataType: 'json',
      success: (res) => {
        // console.log(res);
        if (res.code != 200) {
          console.log(res);
        }
        init();
      }
    })
  })
  // 获取对应英雄id
  let heroId = null;
  // 获取上传头像的id
  $("#tbody").on("click", ".btn-warning", function () {
    // console.log(this);
    heroId = $(this).attr("data-id");

    $("input[type=file]").click();
  })
  // 上传头像
  $("input[type=file]").on("change", function () {
    // console.log(this);
    let file = $(this)[0].files[0];
    let fd = new FormData();
    fd.append("file_data", file);
    console.log(...fd);
    $.ajax({
      url: 'http://127.0.0.1:3000/hero/uploadFile',
      type: 'POST',
      data: fd,
      dataType: 'json',
      contentType: false,
      processData: false,
      success: (res) => {
        // console.log(res);
        if (res.code != 200) {
          console.log(res);
        }
        $.ajax({
          url: 'http://127.0.0.1:3000/hero/updateHero',
          type: 'POST',
          data: {
            id: heroId,
            img: res.src
          },
          dataType: 'json',
          success: (res) => {
            console.log(res);
            init();
          }
        })
      }
    })

  })
})
// 初始化页面数据
function init() {
  $("#tbody").html();
  $.ajax({
    url: 'http://127.0.0.1:3000/hero/getHeroList',
    type: 'GET',
    data: {},
    dataType: 'json',
    success: (res) => {
      // console.log(res);
      if (res.code != 200) {
        console.log(res);
      }
      let htmlStr = template("heroList", {
        list: res.heros
      });
      $("#tbody").html(htmlStr);
    },
    error: (event, request, settings) => {
      console.log(event, request, settings);
      if (event.status === 401) {
        alert("当前用户未登录，没有权限进行任何操作");
        location.href = './login.html';
        return;
      }
    }
  })

  // 它会自动收集ajax中的错误
  // $(document).ajaxError(function (event, request, settings) {
  //   if (request.status === 401) {
  //     alert('没有权限')
  //     // alert(request.responseJSON.msg)
  //     location.href = './login.html'
  //     return
  //   }
  // })
}